<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item>
        <image src="/static/banner1.jpg" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/banner2.jpg" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>

      <view class="card">
        <view class="card-item">
          <text class="card-title">银饰</text>
          <!-- <text class="card-subtitle">茶友里面请</text> -->
        </view>
        <view class="divider"></view> <!-- 分割线 -->
        <view class="card-item">
          <text class="card-title">皮具</text>
          <!-- <text class="card-subtitle">奉茶到家</text> -->
        </view>
      </view>
   <view class="card-type">
     <view class="card-item">
       <text class="card-title-type">银饰</text>
       <!-- <text class="card-subtitle">茶友里面请</text> -->
     </view>
     <view class="card-item">
       <text class="card-title-type">耳环</text>
       <!-- <text class="card-subtitle">奉茶到家</text> -->
     </view>
	 <view class="card-item">
	   <text class="card-title-type">玻璃</text>
	   <!-- <text class="card-subtitle">奉茶到家</text> -->
	 </view>
	 <view class="card-item">
	   <text class="card-title-type">皮具</text>
	   <!-- <text class="card-subtitle">奉茶到家</text> -->
	 </view>
   </view>
   <!-- 其他内容 -->
   <view class="content">
        <!-- 其他部分的内容 -->
        <!-- ... -->
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 你可以在这里添加数据绑定
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0px;
   background-color: #C6F4FF; /* 剩余部分背景颜色为蓝色 */
}

/* 轮播图 */
.swiper {
  height: 47vh; /* 轮播图占屏幕高度的47% */
  margin-top: 0; /* 确保紧贴屏幕顶部 */
  width: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  position: relative; /* 确保轮播图为相对定位 */
  z-index: 1; /* 轮播图的层级 */
}

/* 内容框 */
.content {
  flex: 1;
  overflow-y: auto; /* 允许内容滚动 */
}

/* 卡片 */
.card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white; /* 卡片背景颜色 */
  padding: 20px;
  margin: -10px 10px 10px 10px; /* 上边距为负值，使卡片上移 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  position: relative; /* 确保卡片在轮播图上方 */
  z-index: 2; /* 确保卡片在轮播图上方 */
  height: 210rpx;
  background-color: white;
}
.card-type {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white; /* 卡片背景颜色 */
  padding: 20px;
  margin: 0px 10px 20px 10px; /* 上边距为负值，使卡片上移 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  position: relative; /* 确保卡片在轮播图上方 */
  z-index: 2; /* 确保卡片在轮播图上方 */
  height: 100rpx;
  background-color: white;
}

.card-item {
  text-align: center;
  flex: 1; /* 使内容均匀分布 */
}

.divider {
  width: 2px;
  height: 80px;
  background-color: #e0e0e0; /* 分割线颜色 */
}

.card-title {
  font-size: 22px;
  font-weight: bold;
  color: #333; /* 标题颜色 */
}
.card-title-type {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* 标题颜色 */
}
.card-subtitle {
  font-size: 14px;
  color: #666; /* 副标题颜色 */
  margin-top: 5px;
}
</style>